<!-- 封装的简单图表组件，支持单折线、饼状图、柱状图-->
<template>
  <div :id="this.$props.id" :style="{width:this.$props.width,height:this.$props.height}"></div>
</template>

<script>
const echarts = require('echarts');
export default {
  name: "LineChart",
  props: {
    id: String, // 画布id
    type: String, // 图表类型
    width: String, // 图表画布宽度
    height: String, // 图表画布高度
    title: String, // 主标题
    subTitle: String, // 子标题
    titleAlign: String, // 标题对齐方式
    xAxis: [],  // x轴数据
    yAxis: [],  // y轴数据
  },
  data(){
    return {
      data: [],
      option: {
        title: {
          text: this.$props.title,
          subtext: this.$props.subTitle,
          left: this.$props.left
        },
        xAxis: {
          type: 'category',
          data: this.$props.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.$props.yAxis,
          type: this.$props.type
        }]
      }
    }
  },
  mounted() {
    let myChart = echarts.init(document.getElementById(this.$props.id));
    myChart.setOption(this.option);
    console.log("初始化完成")
  }
}
</script>

<style scoped>

</style>